$(function () {
    'use strict';
    $('#uploadFile').fileupload({
        url: base_url+'submit_art/do_upload',
		dropZone: $('.drag-drop-wrapper'),
		autoUpload: true,
		maxFileSize: 5000000,
		acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
		previewMaxWidth: 80,
		previewMaxHeight: 80,
		filesContainer: $('table#filePreview'),
		uploadTemplateId: null,
		downloadTemplateId: null,
		uploadTemplate: function (o) {
			var rows = $();
			$.each(o.files, function (index, file) {
				var row = $('<tr class="template-upload fade">' +
					'<td width="80"><span class="preview"></span></td>' +
					'<div class="error"></div>' +
					'</td>' +
					'<div class="progress"></div>' +
					'</td>' +
					'</tr>');
				rows = rows.add(row);
			});
			return rows;
		},
		downloadTemplate: function (o) {
			var rows = $();
			$.each(o.files, function (index, file) {
				var row = $('<tr class="template-download fade">' +
					'<td width="80"><span class="preview"></span></td>' +
					(file.error ? '<div class="error"></div>' : '') +
					'</td>' +
					'<td><span class="size"></span></td>' +
					'<td><button class="delete dark-red"><i class="glyphicon glyphicon-trash"></i></button></td>' +
					'</tr>');
				row.find('.size').text(o.formatFileSize(file.size));
				if (file.error) {
					row.find('.error').text(file.error);
				} else {
					if (file.thumbnailUrl) {
						row.find('.preview').append(
							$('<img>').prop('src', file.thumbnailUrl)
						);
					}
					row.find('a').prop('href', file.url);
					row.find('button.delete').attr('data-type', file.deleteType).attr('data-url', file.deleteUrl);
				}
				rows = rows.add(row);
			});
			return rows;
		}
    });

});
